<template>
  <CDialog
    title="DQR评分"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    :loading="loading"
    @cancel="dialogVisible = false"
  >
    <el-form ref="formRef" label-position="top" :rules="rules" :model="dqrForm">
      <div class="rule-header mt-12">
        <CIcon :type="`c-xian-11`" class="g-mr6"></CIcon>
        <span class="g-font-14n1b500">初级数据评分</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="准确性(P)">
            <CSelect v-model="dqrForm.accuracyDqr" placeholder="请选择">
              <el-option
                v-for="item in pOption"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时间代表性(TiR)">
            <CSelect v-model="dqrForm.timeDqr" placeholder="请选择">
              <el-option
                v-for="item in tirOption"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="技术代表性(TeR)">
            <CSelect v-model="dqrForm.techDqr" placeholder="请选择">
              <el-option
                v-for="item in terOption"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地域代表性(GeR)">
            <CSelect v-model="dqrForm.regionDqr" placeholder="请选择">
              <el-option
                v-for="item in gerOption"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="rule-header">
        <CIcon :type="`c-xian-21`" class="g-mr6"></CIcon>
        <span class="g-font-14n1b500">次级数据评分</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="时间代表性(TiR)">
            <CSelect v-model="dqrForm.timeDqr1" placeholder="请选择">
              <el-option
                v-for="item in tirOption1"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="技术代表性(TeR)">
            <CSelect v-model="dqrForm.techDqr1" placeholder="请选择">
              <el-option
                v-for="item in terOption1"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地域代表性(GeR)">
            <CSelect v-model="dqrForm.regionDqr1" placeholder="请选择">
              <el-option
                v-for="item in gerOption1"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </CSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </CDialog>
</template>

<script lang="ts">
export default {
  name: 'DqrDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, watch, ref, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { CSelect } from '@/components/CSelect';

import { useMessage } from '@/hooks/useMessage';
import { scoreDqr } from '@/apis/pcf/myModel/dqr';

import { rules } from './rules';
interface IProps {
  visible: boolean;
  rowData?: any;
  modelNo: string;
  nodeNoList: string[];
}
const props = withDefaults(defineProps<IProps>(), {});
const emits = defineEmits(['update:visible', 'refresh']);
const { createMessage } = useMessage();
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      init();
    }
  }
);

const pOption = [
  { label: '1-测量/计算并且外部验证', value: 1 },
  { label: '2-测量/计算并且内部验证，可信度由审查员检查', value: 2 },
  { label: '3-测量/计算并且外部验证', value: 3 }
];
const tirOption = [
  { label: '1-数据参考最近的年管理期中，环境足迹报告公布的数据', value: 1 },
  { label: '2-数据参考最多两个年度管理期中，环境足迹报告公布的数据', value: 2 },
  { label: '3-数据参考最多三个年度管理期中，环境足迹报告公布的数据', value: 3 }
];
const terOption = [
  { label: '1-基本流和活动数据准确地反映最新创建数据集的技术', value: 1 },
  { label: '2-基本流和活动数据可以代表最新创建数据集的技术', value: 2 }
];

const gerOption = [
  { label: '1-活动数据和基本流准确地反映这个最新创建的数据集中的模型化工序的使用地区', value: 1 },
  { label: '2-活动数据和基本流大致反映这个最新创建的数据集中的模型化工序的使用地区', value: 2 }
];

const tirOption1 = [
  { label: '1-环境足迹报告发布的日期在数据集的有效期内', value: 1 },
  { label: '2-环境足迹报告发布的日期不晚于数据集有效期的2年', value: 2 },
  { label: '3-环境足迹报告发布的日期不晚于数据集有效期的4年', value: 3 },
  { label: '4-环境足迹报告发布的日期不晚于数据集有效期的6年', value: 4 },
  { label: '5-环境足迹报告发布的日期超过数据集有效期的6年，或是数据集的有效期不明确', value: 5 }
];
const terOption1 = [
  { label: '1-在环境足迹研究中使用的技术与数据集范围内的技术完全相同', value: 1 },
  { label: '2-在环境足迹研究中使用的技术包括在数据集范围内的技术组合中', value: 2 },
  { label: '3-在环境足迹研究中使用的技术只有部分包括在数据集范围内的技术组合中', value: 3 },
  { label: '4-在环境足迹研究中使用的技术与数据集范围内的技术类似', value: 4 },
  { label: '5-在环境足迹研究中使用的技术与数据集范围内的技术不同', value: 5 }
];

const gerOption1 = [
  { label: '1-环境足迹研究中模拟的工序在数据集有效的国家有应用', value: 1 },
  { label: '2-环境足迹研究中模拟的工序在数据集有效的一些地区（如欧洲）有应用', value: 2 },
  { label: '3-环境足迹研究中模拟的工序在数据集有效的其中一个地区有应用', value: 3 },
  {
    label:
      '4-环境足迹研究中模拟的工序应用的国家不属于数据集有效的地区，但是地区间的相似性基于专家的判断进行了充分的评估',
    value: 4
  },
  { label: '5-环境足迹研究中模拟的工序在数据集有效的国家中没有应用', value: 5 }
];

interface RuleForm {
  id: string;
  username: string;
  realName: string;
  phone: string;
}
const loading = ref(false);

const dqrForm = reactive({
  accuracyDqr: '',
  techDqr: '',
  regionDqr: '',
  timeDqr: '',
  techDqr1: '',
  regionDqr1: '',
  timeDqr1: '',
  relevanceFlag: true
});
function init() {
  if (props.nodeNoList.length == 1) {
    const { activityDqr, factorDqr, relevanceFlag } = props.rowData;
    dqrForm.accuracyDqr = activityDqr?.accuracyDqr || '';
    dqrForm.techDqr = activityDqr?.techDqr || '';
    dqrForm.regionDqr = activityDqr?.regionDqr || '';
    dqrForm.timeDqr = activityDqr?.timeDqr || '';
    dqrForm.techDqr1 = factorDqr?.techDqr || '';
    dqrForm.regionDqr1 = factorDqr?.regionDqr || '';
    dqrForm.timeDqr1 = factorDqr?.timeDqr || '';
    dqrForm.relevanceFlag = relevanceFlag;
  } else {
    dqrForm.accuracyDqr = '';
    dqrForm.techDqr = '';
    dqrForm.regionDqr = '';
    dqrForm.timeDqr = '';
    dqrForm.techDqr1 = '';
    dqrForm.regionDqr1 = '';
    dqrForm.timeDqr1 = '';
  }
}

const formRef = ref();
const submitHandle = async () => {
  if (dqrForm.techDqr || dqrForm.regionDqr || dqrForm.timeDqr || dqrForm.accuracyDqr) {
    if (!dqrForm.techDqr || !dqrForm.regionDqr || !dqrForm.timeDqr || !dqrForm.accuracyDqr) {
      return createMessage.warning('初级数据评分必须填写完整');
    }
  }
  if (dqrForm.techDqr1 || dqrForm.regionDqr1 || dqrForm.timeDqr1) {
    if (!dqrForm.techDqr1 || !dqrForm.regionDqr1 || !dqrForm.timeDqr1) {
      return createMessage.warning('次级数据评分必须填写完整');
    }
  }
  try {
    loading.value = true;
    const params = {
      modelNo: props.modelNo,
      nodeNoList: props.nodeNoList,
      activityDqr: {
        techDqr: dqrForm.techDqr || null,
        regionDqr: dqrForm.regionDqr || null,
        timeDqr: dqrForm.timeDqr || null,
        accuracyDqr: dqrForm.accuracyDqr || null
      },
      factorDqr: {
        techDqr: dqrForm.techDqr1 || null,
        regionDqr: dqrForm.regionDqr1 || null,
        timeDqr: dqrForm.timeDqr1 || null
      }
    };
    await scoreDqr(params);
    createMessage.success('评分成功！');
    dialogVisible.value = false;
    emits('refresh');
  } finally {
    loading.value = false;
  }
};
function handleConfirm() {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      submitHandle();
    }
  });
}
</script>

<style lang="scss" scoped>
.rule-header {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
}
.mt-12 {
  margin-top: -12px;
}
</style>
